<template>
  <div id="app">
    <!-- <mt-header title=""></mt-header> -->
    <mt-search v-model="searchValue" placeholder="沙龙标题搜索">
      <ul class="search-result">
        <li v-for="(item,index) in activities" @click="changeActivity(item.id)">
         {{index+1}}、{{item.title}}
        </li>
      </ul>
    </mt-search>
    <img src="./assets/logo.png">
  </div>
</template>

<script>
import { Cell, Checklist, Header, Search, MessageBox } from 'mint-ui'
export default {
  // name: 'app',
  components: {
    'mt-cell': Cell, Checklist, 'mt-header': Header, 'mt-search': Search
  },
  data() {
    return {
      searchValue: '',
      activities: []
    }
  },
  watch: {
    searchValue: function (newValue, oldValue) {
      this.searchActivityList(newValue)
    }
  },

  methods: {
    searchActivityList(kw) {
      let vm = this;
      if(kw.length==0){
        vm.activities=[];
        return;
      }
      vm.$http.get(vm.url.acid + "&do=searchActivity&keyword=" + kw).then(response => {
        let body = response.body;
        if (body.status == "success") {
          vm.activities = body.data;
        } else {
          MessageBox('提示', body.msg);
        }
        // console.log(body)
      }, response => {
        MessageBox('提示', '链连接服务器失败');
      });
    },
    changeActivity(actid) {
      this.searchValue="";
      console.log(actid);
    }
  }
}
</script> 
<style>
body {
  margin: 0px;
  padding: 0px;
}
.search-result{
  padding: .5rem;
}
.search-result li{
  list-style-type: none;
  line-height: 2rem;
  text-align: left;
}
.search-result li:active{
  background-color: #999;
}

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>
